<template>
    <div>

        <div ref="gameBox"></div>
        <div>
            <input type="range" max="720" min="-720" v-model="rBoxRX">
            <input type="number" v-model="rBoxRX">TX:{{rBoxRX}}<br/>
            <input type="range" max="720" min="-720" v-model="rBoxRY">
            <input type="number" v-model="rBoxRY">TY:{{rBoxRY}}<br/>
            <input type="range" max="720" min="-720" v-model="rBoxRZ">
            <input type="number" v-model="rBoxRZ">TZ:{{rBoxRZ}}<br/>
            layer:
            <select name="layer" v-model="layer">
                <option v-for="(item,index) in 20" v-bind:key="index" :value="index+2">{{index+2}}</option>
            </select>
            <button @click="newGame">NEW GAME</button><button @click="resetXYZ">resetXYZ</button><br/>
            <button @click="randomMove">随机动画</button>状态：{{randomMoveOn}}<br/>
        </div>
        <div>
            <button v-bind:key="index" v-for="(item,index) in keys" @click="startGame(index)">{{item[1]}}</button>
        </div>
    </div>
</template>

<script>
    import OneRubik from './OneRubik'
    export default {
    name: "oneLayerRubik",
    data(){
      return {
        gameCore:null,
        rubikBox:null,
        keys:[],
        rBoxRX:-30,
        rBoxRY:-30,
        rBoxRZ:0,
        layer:3,
          randomMoveOn:false,
          randomMoveTimer:null,
      }
    },
    watch:{
      rBoxRX(){
        this.bigMoving();
      },
      rBoxRY(){
        this.bigMoving();
      },
      rBoxRZ(){
        this.bigMoving();
      }
    },
    mounted(){
      this.newGame();
    },
    methods:{
        randomMove(){
            if(this.randomMoveOn===true){
                this.randomMoveOn=false;
                clearInterval(this.randomMoveTimer);
            }else{
                this.randomMoveOn=true;
                let vm=this;
                this.randomMoveTimer=setInterval(function () {
                    let ranNum=Math.floor(Math.random()*vm.keys.length);
                    vm.startGame(ranNum);
                },1000/10);
            }
        },
        resetXYZ(){
            this.rBoxRX=-30;
            this.rBoxRY=-30;
            this.rBoxRZ=0;
        },
      newGame(){
        let obj=this.$refs.gameBox;
        obj.innerHTML='';
        this.gameCore=new OneRubik(obj,this.layer);
          this.rubikBox=this.gameCore.rubikBox;
        this.keys=this.gameCore.keys;
        this.bigMoving();
      },
      bigMoving(){
        this.rubikBox.style.transform=`rotateX(${this.rBoxRX}deg)
                                          rotateY(${this.rBoxRY}deg)
                                          rotateZ(${this.rBoxRZ}deg)`;
      },
      startGame(index){
        this.gameCore.startMove(this.keys[index]);
      },

    }
  }
</script>

<style scoped>

</style>